<!-- src/views/CreateBookView.vue -->
<template>
  <div class="create-book-view">
    <el-container>
      <el-header>
        <div class="header-content">
          <h2>📚 添加新图书</h2>
          <el-button @click="goBack">返回列表</el-button>
        </div>
      </el-header>
      <el-main>
        <el-form
          :model="bookForm"
          :rules="rules"
          ref="bookFormRef"
          label-width="120px"
          @submit.prevent="submitForm"
        >
          <el-form-item label="ISBN" prop="isbn">
            <el-input v-model="bookForm.isbn" placeholder="请输入ISBN" />
          </el-form-item>

          <el-form-item label="书名" prop="title">
            <el-input v-model="bookForm.title" placeholder="请输入书名" />
          </el-form-item>

          <el-form-item label="作者" prop="author">
            <el-input v-model="bookForm.author" placeholder="请输入作者" />
          </el-form-item>

          <el-form-item label="分类" prop="genre">
            <el-select v-model="bookForm.genre" placeholder="请选择分类">
              <el-option label="文学" value="文学" />
              <el-option label="小说" value="小说" />
              <el-option label="编程" value="编程" />
              <el-option label="历史" value="历史" />
              <el-option label="科学" value="科学" />
              <el-option label="艺术" value="艺术" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>

          <el-form-item label="出版日期" prop="publicationDate">
            <el-date-picker
              v-model="bookForm.publicationDate"
              type="date"
              placeholder="选择出版日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <el-form-item label="总数量" prop="totalCopies">
            <el-input-number
              v-model="bookForm.totalCopies"
              :min="1"
              :max="1000"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm" :loading="submitting">
              保存图书
            </el-button>
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { createBookService } from '@/services/bookServiceFactory'
import { ElMessage } from 'element-plus'

export default {
  name: 'CreateBookView',
  setup() {
    const router = useRouter()
    const bookFormRef = ref(null)
    const submitting = ref(false)
    const bookService = createBookService()

    const bookForm = reactive({
      isbn: '',
      title: '',
      author: '',
      genre: '',
      publicationDate: '',
      totalCopies: 1
    })

    const rules = {
      isbn: [
        { required: true, message: '请输入ISBN', trigger: 'blur' },
        { min: 10, max: 20, message: 'ISBN长度在10到20个字符之间', trigger: 'blur' }
      ],
      title: [
        { required: true, message: '请输入书名', trigger: 'blur' },
        { min: 1, max: 100, message: '书名长度在1到100个字符之间', trigger: 'blur' }
      ],
      author: [
        { required: true, message: '请输入作者', trigger: 'blur' },
        { min: 1, max: 50, message: '作者名长度在1到50个字符之间', trigger: 'blur' }
      ],
      genre: [
        { required: true, message: '请选择分类', trigger: 'change' }
      ],
      publicationDate: [
        { required: true, message: '请选择出版日期', trigger: 'change' }
      ],
      totalCopies: [
        { required: true, message: '请输入总数量', trigger: 'blur' },
        { type: 'number', min: 1, max: 1000, message: '数量必须在1-1000之间', trigger: 'blur' }
      ]
    }

    const goBack = () => {
      router.go(-1)
    }

    const submitForm = async () => {
      try {
        await bookFormRef.value.validate()
        submitting.value = true

        console.log('准备创建图书:', bookForm)
        await bookService.createBook(bookForm)
        ElMessage.success('图书添加成功！')
        router.push('/books')
      } catch (error) {
        console.error('创建图书失败:', error)
        ElMessage.error('创建图书失败: ' + (error.message || '未知错误'))
      } finally {
        submitting.value = false
      }
    }

    return {
      bookFormRef,
      bookForm,
      rules,
      submitting,
      goBack,
      submitForm
    }
  }
}
</script>

<style scoped>
.create-book-view {
  height: 100vh;
}
.el-header {
  background-color: #f5f7fa;
  padding: 0 20px;
  border-bottom: 1px solid #ebeef5;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.el-main {
  padding: 20px;
}
</style>